<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ page isELIgnored="false" %> 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
        <title><c:out value="${article.title }">${_blogTitle }</c:out></title>
        <meta name="keywords" content="${_keyword },${article.title }" />
        <meta name="description" content="${_description },<c:if test="${not empty article.tags }"><c:forEach var="tag" items="${article.tags }" varStatus="status">${tag },</c:forEach></c:if>" />
        
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		
		<meta property="og:type" content="website" />
		<meta property="og:title" content="<c:out value="${article.title }">OoM-详情</c:out>">
		<meta property="og:description" content="OoMabc是一个技术博客，欢迎收藏，也欢迎拍砖！Talk is cheap. Show me the code.（废话少说，放码过来。）">
		<meta property="og:image" content="https://oomabc.com/static/img/icon.png">

		<link href="/static/plugin/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		
		
		<link rel="icon" href="/static/img/logo.ico" type="image/x-icon" />
		<script src="/static/plugin/jquery.min.js"></script>
		
		<link href="/static/plugin/highlight/styles/dracula.css" rel="stylesheet">
		<script src="/static/plugin/highlight/highlight.pack.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.6.0/highlightjs-line-numbers.min.js"></script>
		<script src="/static/plugin/showdown-master/dist/showdown.min.js"></script>
		
		<link href="/static/css/base.css" rel="stylesheet" />
		<link href="/static/css/index.css" rel="stylesheet" />
		<link href="/static/css/m.css" rel="stylesheet" />

		<style  type="text/css" >
		.topnav ul {
			margin : 0px;
		}
		
		#keyword {
			height : 28px !important;
		}
		body{
			color : black !important;
			font-size : 15px !important;
		}
		blockquote{
			font-size : 14px;
			text-aign : left !important;
			background-color : #FFFFDD;
			color : #444444;
		}
		.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
			font-weight : bold !important;
		}
		
		.h3, h3{
		  margin-top : 50px !important;
		  font-size : 32px;
		  border-bottom : 1px solid #dddddd;
		  padding-bottom : 8px;
		  margin-bottom : 10px;
		}
        .h4, h4 {
          margin-top : 35px;
          line-height : 22px;
          font-size : 25px;
          border-bottom : 1px solid #eeeeee;
          padding-bottom : 8px;
          margin-bottom : 10px;
        }
        .h5, h5 {
          margin-top : 35px !important;
          font-size : 18px;
          border-bottom : 1px solid #efefef;
          padding-bottom : 8px;
          margin-bottom : 10px;
        }
        
        
		.news_infos{
			text-align : left !important;
		}
						
		@media screen and (min-width: 960px) and (max-width: 4199px) {
			.sidebar {
				width : 23.8% !important;
			}
		}
		
		div#img_block_div{
			z-index : 9999;
			text-align : center; 
			position: fixed; 
			top : 0px; 
			display : none; 
			box-shadow : 1px 1px 16px black; 
			margin : auto; 
			background : rgba(25, 25, 25, 0.5);
		}
		.img_block_div_img{
			margin : 50px auto;
			border : 1px solid white;
			box-shadow : 0 0 5px gray;
		}
		
		.hljs-comment, .hljs-quote {
		    color: gray;
		}
		
		pre{
		  border-radius : 5px;
		  margin-bottom : 25px;
		  margin-top : -8px;
		  border : none;
		  padding : 20px;
		  background-color : white;
		}
		pre code {
		  display : block;
		  font-weight : normal;
          border-radius : 4px;
          -webkit-box-shadow: 2px 2px 5px rgba(88, 88, 88, 0.5);
          box-shadow: 2px 2px 5px rgba(88, 88, 88, 0.5);
          margin : auto;
          padding : 20px 10px 20px 20px !important;
          line-height : 22px;
          font-size : 15px !important;
          font-family: Menlo,Consolas,"Courier New",monospace;
          min-width : 500px;
		}
		.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-title, .hljs-section, .hljs-doctag, .hljs-type, .hljs-name, .hljs-strong {
		    font-weight: 100;
		    font-size : 15px !important;
		}
		
		/* for block of numbers */
		.hljs-ln td.hljs-ln-numbers {
		    -webkit-touch-callout: none;
		    -webkit-user-select: none;
		    -khtml-user-select: none;
		    -moz-user-select: none;
		    -ms-user-select: none;
		    user-select: none;
		
		    text-align: center;
		    color: #ccc;
		    border-right: 1px solid #CCC;
		    vertical-align: top;
		    padding-right: 10px;
		
		    /* your custom style here */
            white-space:nowrap;
		}
		
		/* for block of code */
		.hljs-ln td.hljs-ln-code {
		    padding-left: 10px;
		}
		
		.h_title_class_H3 {
		  padding-left : 20px;
		  line-height : 33px;
		  font-size : 18px;
		  margin-top : 5px;
		  color : black;
		}
		.h_title_class_H3 a{
          border-left : 4px solid #ededed;
          padding-left : 5px;
		}
        .h_title_class_H4 {
          padding-left : 60px;
          line-height : 24px;
          margin-top : 3px;
        }
        .h_title_class_H5 {
          padding-left : 100px;
          line-height : 24px;
        }
        
        sup{
            top : -1.5em;
        }
        
        #articleNavigationDiv{
            max-width : 400px;
            min-width : 200px;
            display : inline-block;
            overflow : auto;
        }
        .articleNavigationDiv-fixed{
            position : fixed;
            padding : 8px 8px 8px 0;
            left : 0;
            top : 65px;
            background-color : #FAFAFA;
        }
        .articleNavigationDiv-normal{
            margin-top : 15px;
            padding-bottom : 30px;
        }
        
        img[alt="block_img"]{
            box-shadow : 2px 2px 15px #999999;
        }
        .newsview1{
            background : url('/static/img/origin.png') no-repeat;
        }
        .newsview2{
            background : url('/static/img/outer.png') no-repeat;
        }
		</style>
	</head>
	<body>
        <div style="display:none;"><img src="/static/img/icon.png" alt=""></div>

		<jsp:include page="common/top.jsp" />
	      
		<article>
		  	<h1 class="t_nav" style="margin : 0px; font-weight : normal !important;"><span>您现在的位置是：首页 > 技术文章 > 详情</span><a href="list" class="n1">&lt;&lt;文章列表</a><a href="#" class="n2">阅读</a></h1>
			<div style="padding : 3px;">
				<div class="infos">
			    	<div class="newsview 
			    	    <c:if test="${not empty article.srcType }">
                            <c:choose>
                                <c:when test="${ article.srcType == 1 }">newsview1</c:when><c:otherwise>newsview2</c:otherwise>
                            </c:choose>
                        </c:if>" style="padding-top : 30px;">
			      		<span class="news_title">${article.title }</span>&nbsp;&nbsp;&nbsp;
			      		<div class="tags">
			      		    <span class="lm" style="padding-left : 20px;">
			      			<c:if test="${not empty article.tags }">
			      				<c:forEach var="tag" items="${article.tags }" varStatus="status">
			      				<a class="hvr-buzz-out" href="list?tag=${tag }" target="_blank">${tag }</a> &nbsp; 
			      				</c:forEach>
			      			</c:if>
			      			</span>
			      		</div>
			      		<div class="news_author can_not_selected" >
			      		 <span class="au01"><a href="mailto:wjyuian@126.com" style="color : rgb(153, 153, 153);">wjyuian</a></span>&nbsp;&nbsp;
			      		 <span class="au02">${article.updateTimeString }</span>&nbsp;&nbsp;
			      		 <span class="au03">${article.viewCount }</span>&nbsp;&nbsp;
                            <c:choose>
                                <c:when test="${ article.goodSet == 1 }">  
                                    <span class="au05_yes" style="margin-right : 0px;"></span>
                                </c:when>
                                <c:otherwise> 
                                    <span class="au05_no" onclick="setArticleGood('${article.id}');" style="margin-right : 0px; cursor : pointer;"></span>
                                </c:otherwise>
                            </c:choose><span style="margin : 0; padding : 0;" id="goodCount">${article.goodCount }</span>
                            <input type="hidden" value="${article.id }" id="currentArticleId" />
			      		</div>
			      		<!-- <div class="news_about">
						</div> -->
						
                        <hr class="hrLine1" />
                        
				        <div id="articleNavigationDiv">
				          
				        </div>
				          
						<!-- 通过textarea进行数据转接，不会发生html样式bug，错乱等问题 -->
                        <textarea id="articleDetailDivText" name="" rows="" cols="" style="display : none;" >${article.content }</textarea>
			      		<div class="news_infos">
			      			<div id="articleDetailDiv"></div>
			      		</div>
			    	</div>
		            <!-- 		    
	                <div class="nextinfo">
				      	<p>上一篇：<a href="/news/life/2018-03-13/804.html">作为一个设计师,如果遭到质疑你是否能恪守自己的原则?</a></p>
				      	<p>下一篇：<a href="/news/life/">返回列表</a></p>
				    </div> 
				    -->
				    <div class="otherlink">
				    <c:if test="${not empty relativeArticles}">
	                    <h2>相关文章</h2>
	                    <ul>
	                        <c:forEach var="article" items="${ relativeArticles }" varStatus="status" >
	                            <li style="width : 340px;">
	                                <a href="articledetail?atclid=${article.id}" title="${article.title}" >${article.title}</a>
	                            </li>
	                        </c:forEach>
	                    </ul>
					</c:if>
				    </div>
				    <!-- <div class="news_pl">
				      	<h2>文章评论</h2>
				      	<ul>
				        	<div class="gbko"> </div>
				      	</ul>
				    </div> -->
				</div>
		    </div>
		  	<div class="sidebar" style="padding-top : 7px;">
			    <!-- 关键字 -->
				<jsp:include page="common/search_input.jsp" />
				    	
			    <!-- 栏目导航 -->
				<jsp:include page="common/navigator_right.jsp" />
		    
		    	<!-- 点击排行 -->
				<jsp:include page="common/click_rank.jsp" />
		    
			 	<!-- 标签 -->
				<jsp:include page="common/tags_rank.jsp" />
				
				<!-- 站长推荐 -->    
				<jsp:include page="common/priority_rank.jsp" />
				
			</div>
		</article>

		<div class="blank"></div>
		<jsp:include page="common/bottom.jsp" />
	</body>
	
	<script type="text/javascript">
	hljs.initHighlightingOnLoad();

	hljs.initLineNumbersOnLoad({
	    singleLine: true
	});
	
	var converter = new showdown.Converter({extensions: function() {
		  function htmlunencode(text) {
		    return (
		      text
		        .replace(/&amp;/g, '&')
		        .replace(/&lt;/g, '<')
		        .replace(/&gt;/g, '>')
		      );
		  }
		  return [
		    {
		      type: 'output',
		      filter: function (text, converter, options) {
		    	 //console.log(text);
		        // use new shodown's regexp engine to conditionally parse codeblocks
		        var left  = '<pre><code\\b[^>]*>',
		            right = '</code></pre>',
		            flags = 'g',
		            replacement = function (wholeMatch, match, left, right) {
		              // unescape match to prevent double escaping
		              match = htmlunencode(match);
		              return left + hljs.highlightAuto(match).value + right;
		            };
		        return showdown.helper.replaceRecursiveRegExp(text, replacement, left, right, flags);
		      }
		    }
		  ];
	}()});
	
	function convert(){
	    var text = document.getElementById("articleDetailDivText").value;

	   // console.log(text);
	    /**
	    text = text
        .replace(/&amp;/g, '&')
        .replace(/&lt;/g, '<')
        .replace(/&gt;/g, '>');
	    /**/
	    
	    var html = converter.makeHtml(text);

	    document.getElementById("articleDetailDiv").innerHTML = html;

		$('pre code').each(function(i, block) {
		    hljs.highlightBlock(block);
		    
		    jQuery('pre code').each(function() {
		        var code = $(this);
		        var pre = code.parent('pre');
		        
		        /* code.css({
		        	'white-space' : 'nowrap;',
		        	display : 'block'
		        }); */
		        
		        pre.css({
		        	'overflow-x' : 'auto',
		        	'border-radius' : '0px'
		        });
		    });
		});
		
		//设置链接样式
		var aLink = $('#articleDetailDiv').find('a');
		aLink.attr('target', '_blank');
		aLink.css({
			color : '#1C86EE',
			'margin-left' : '3px'
		});
		aLink.after('<img style="display : inline-block;" width="15" height="15" src="/static/img/link-external.png" />&nbsp;');
		
		//设置标题样式 articleNavigationDiv
		var html = '';
		var index = 1;
		jQuery('h3,h4,h5').each(function() {
			var obj = $(this);
			var tagTitle = obj.html();
			var tagName = obj[0].tagName;
			console.log('title ', tagName, tagTitle);
			var id = 'h_title_for_location_' + (index ++);
			obj.attr('id', id);
			
			html += '<div class="h_title_class_' + tagName + '" ><a href="javascript:void(0);" onclick="jumpTo(\'' + id + '\')">' 
			+ tagTitle + '</a>&nbsp;&nbsp;</div>';
		});
		$('#articleNavigationDiv').html(html);
		
		initNavigate();
	}
	var jumpOffset = 50;
	function jumpTo(id) {
		var obj = $('#' + id);
		console.log(obj.position().top);
		
		var targetPosition = obj.position().top - jumpOffset;
		//obj.scrollTop(500);
        $("html,body").animate({"scrollTop": targetPosition}, 500)
	}
	//当前的模式是否是阅读模式；阅读模式：隐藏侧边栏
	var _readModel = false;
	var _infoWidth = null;
	$(function() {
		convert();
		
		initImgViewBlock('articleDetailDiv');
		
		$('#readModelClick').click(function() {
			if(_readModel) {
				setReadModel(0);
				_readModel = false;
			} else {
				setReadModel(1);
				_readModel = true;
			}
		}).fadeIn(0);
		
		if($.browser.chrome) {
			console.log($.browser);
			  $('pre code').css({
				  'box-shadow' : '2px 2px 5px rgba(88, 88, 88, 0.8)'
			  });
		}
		
		if(localCache('readModelWidth')) {
            setReadModel(1);
            _readModel = true;
		} else {
            setReadModel(0);
            _readModel = false;
		}
		
		bindClickGood();
	});

	function setToLocal(key, value) {
	    localStorage.setItem(key, JSON.stringify(value));
	}
	function getFromLocal(key) {
	    var temp = localStorage.getItem(key);
	    
	    return temp && JSON.parse(temp) || null;
	}
	var localCache = function() {
	    if(window.localStorage) {
	        return function(k, v) {
	            if(arguments.length == 2) {//set
	                setToLocal(k, v);
	            } else {//get
	            	return getFromLocal(k)
	            }
	        }
	    } else {
	        return function(){};
	    }
	}();
	//1:width; 0:small
	function setReadModel(m) {
		if(m) {
            var info = $('div.infos');
            if(_infoWidth == null) {
                _infoWidth = info.css('width');
            }
            info.css('width', '100%');
            $('div.sidebar').fadeOut(0);
            $('#readModelClick').addClass('bottomToolsIcon_w_s').removeClass('bottomToolsIcon_w_b')
            .attr('title', '窄屏阅读');
            localCache('readModelWidth', true);
		} else {
            var info = $('div.infos');
            info.css('width', _infoWidth);
            $('div.sidebar').fadeIn(0);
            $('#readModelClick').addClass('bottomToolsIcon_w_b').removeClass('bottomToolsIcon_w_s')
            .attr('title', '宽屏阅读');
            
            localCache('readModelWidth', false);
		}
	}

	var maxImgWidth = 0;
	var maxImgHeight = 0;
	//图片点击显示大图
	function initImgViewBlock(containerId) {

		if(jQuery && containerId) {
			jQuery('body').append('<div id="img_block_div" style=" "><img  class="img_block_div_img" /></div>');
			
			var block__ = $('div#img_block_div');
			jQuery('#' + containerId).find('img').bind('click', function() {
		        
		        var swidth = $(window).width()
		        var sheight = $(window).height();
		        maxImgWidth = swidth - 200;
		        maxImgHeight = sheight - 200;
		        
		        console.log(swidth, sheight);
		        
				var imgUrl = $(this).attr('src');
				
				var img = new Image();
				img.onload = function() {
					var imgw = img.width;
					var imgh = img.height;
					console.log(img.width, img.height);

					var imgBlock = block__.find('img.img_block_div_img');
					imgBlock.attr('src', imgUrl);
	                
	                var finalWidth = 0, finalHeight = 0;
                    finalWidth = imgw;
                    finalHeight = imgh;
	                //计算图片尺寸
	                var imgRadio = imgw / imgh;
	                //alert(imgRadio + ' > ' + (maxImgWidth / maxImgHeight));
                    if(imgRadio > maxImgWidth / maxImgHeight) {//按宽度缩放
                    	if(imgw > maxImgWidth) {
                    		finalWidth = maxImgWidth;
                    		//高度缩放
                            finalHeight = finalWidth / imgRadio;
                    	}
                    } else {//按高度缩放
                    	//alert(imgh + ' > ' + maxImgHeight);
                    	if(imgh > maxImgHeight) {
                            finalHeight = maxImgHeight;
                            finalWidth = finalHeight * imgRadio;
                        }
                    }
	                //alert(maxImgWidth + ',' + maxImgHeight + ',' +  imgw + ',' + imgh + ',' + finalWidth + ',' + finalHeight);
	                block__.css({
	                    margin : 'auto',
	                    width : swidth + 'px',
	                    height : sheight + 'px'
	                });
	                imgBlock.css({
	                	'margin-top' : (sheight - finalHeight) / 2 + 'px',
	                	width : finalWidth + 'px',
	                	height : finalHeight + 'px'
	                });
	                block__.fadeIn(0);
				}
				img.src = imgUrl;
			});
			
			block__.click(function() {
				$(this).fadeOut(0);
			});
		}
		
	}
	
	function setArticleGood(id) {
		jQuery.ajax({
			url : '/app/good?id=' + id,
			success : function(rs) {
		        console.log(id, rs);
		        if(rs) {
		        	var span = $('span.au05_no');
		        	span.addClass('au05_yes');
		        	span.removeClass('au05_no');
		        	span.removeAttr('onclick');
		        	
		        	var currentCountHtml = $('#goodCount');
		        	var currentCount = currentCountHtml.html() - 0;
		        	currentCountHtml.html(currentCount + 1);
		        }
			}
		});
	}
	
	function bindClickGood() {
		//未点赞
		if($('span.au05_no').length > 0) {

	        var obj = $('#setGoodClick');
	        var id = $('#currentArticleId').val();
	        obj.click(function() {
	            setArticleGood(id);
	            obj.unbind('click');
	            obj.fadeOut(0);
	        });
	        obj.fadeIn(0);
		}
	}
	var view_width = 1200;
	function initNavigate() {
		var nav = $('#articleNavigationDiv');
		
		var nav_width = nav.width() - 0 + 16;
		var window_width = $(window).width();
		console.log(window_width, nav_width, view_width);
		if((window_width - view_width) / 2 > nav_width) {
		    nav.addClass('articleNavigationDiv-fixed');
		} else {
			nav.addClass('articleNavigationDiv-normal');
		}
		
		var window_height = $(window).height();
		var nav_maxHeight = window_height - 70;
		nav.css({
			'max-height' : nav_maxHeight + 'px'
		});
	}

	</script>
</html>